<!--
 * @Author: 汪誉恒 1063642059@qq.com
 * @Date: 2022-05-30 19:25:46
 * @LastEditors: 汪誉恒 1063642059@qq.com
 * @LastEditTime: 2022-06-18 19:14:37
 * @FilePath: \wui-next\src\lib\Input.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 汪誉恒 1063642059@qq.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { computed } from 'vue';

type InputProps = {
    modelValue: string | number | null | undefined,
    placeholder: string,
    disabled?: boolean,
    clearable?: boolean,
}

const props = withDefaults(defineProps<InputProps>(), {
    modelValue: "",
    placeholder: '请输入',
    disabled: false,
    clearable: false,
})

const emit = defineEmits(['update:modelValue'])

const input = (e: any) => {
    emit('update:modelValue', e.target.value)
}

const wuiClass = computed(() => {
    return {
        'wui-input': true,
        'wui-input-disabled': props.disabled,
    }
})

const clearStyle = computed(() => {
    return {
        'display': props.clearable ? (props.modelValue ? 'block' : 'none') : 'none',
    }
})

const clearInput = () => {
    emit('update:modelValue', '')
}
</script>

<template>
    <div :class="wuiClass">
        <input type="text" :value="modelValue" @input="input" :placeholder="placeholder" :disabled="disabled">
        <span class="clear" :style="clearStyle" @click="clearInput"><i>x</i></span>
    </div>
</template>

<style lang="scss">
.wui-input {
    display: inline-block;
    min-width: 250px;
    position: relative;

    input {
        outline: none;
        line-height: 1;
        padding: 10px 8px;
        width: 100%;
        color: #505050;
        border: 1px solid gray;
        border-radius: 4px;
        transition: all .15s ease;

        &:focus {
            border-color: #BCEDD0;
        }
    }
}

.clear {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
}

.wui-input-disabled {
    input {
        background-color: #f5f5f5;
        color: #ccc;
        border-color: #ccc;
        cursor: no-drop;
    }
}
</style>